<template>
	<div class="login v2">
		<div class="wrapper">
			<div class="dialog dialog-shadow" style="display: block; margin-top: -362px;">
				<div class="registered">
					<h4>注册 无忧 账号</h4>
					<div class="content" style="margin-top: 20px;">
						<ul class="common-form">
							<li class="phone border-1p">
								<div style="margin-top: 40px;" class="input">
									<input type="text" v-model="registered.phone" placeholder="请输入手机号" @input="inputPhone" @keyup="registered.phone=registered.phone.replace(/[^\w\.\/]/ig,'')">
								</div>
							</li>
							<li>
								<div class="input">
									<input type="password" v-model="registered.password" placeholder="密码" @blur="checkPwd">
								</div>
							</li>
							<li>
								<div class="input">
									<input type="password" v-model="registered.confimpassword" placeholder="重复密码">
								</div>
							</li>
							<!-- <li>
                <div id="captcha">
                  <p id="wait">正在加载验证码...</p>
                </div>
              </li>-->
						</ul>
						<!--<el-checkbox class="agree" v-model="agreement">
              我已阅读并同意遵守
              <a @click="open('法律声明','此仅为个人练习开源模仿项目，仅供学习参考，承担不起任何法律问题')">法律声明</a> 和
              <a @click="open('隐私条款','本网站将不会严格遵守有关法律法规和本隐私政策所载明的内容收集、使用您的信息')">隐私条款</a>
            </el-checkbox>-->
						<div class="input_span" title="变强小秘诀：密码包含数字、大小写字母、特殊字符强度会更强哦！">
								<label>密码强度:</label>
								<span id="one"></span>
								<span id="two"></span>
								<span id="three"></span>
							</div>
							<div id="font">
								<span>弱</span>
								<span>中</span>
								<span>强</span>
							</div>
						<div style="margin-bottom: 30px;">
							<y-button :classStyle="registered.password&&registered.confimpassword&&registered.phone&&registxt==='注册'?'main-btn':'disabled-btn'" :text="registxt" style="margin: 0;width: 100%;height: 48px;font-size: 18px;line-height: 48px" @btnClick="regist">
							</y-button>
				            <y-button text="返回" @btnClick="login_back"
				              style="marginTop: 10px; width: 100%;height: 48px;font-size: 18px;line-height: 48px">
				            </y-button>
						</div>
						<div class="border" style="margin-bottom: 10px;"></div>
						<ul class="common-form pr">
							<!-- <li class="pa" style="left: 0;top: 0;margin: 0;color: #d44d44">{{registered.errMsg}}</li> -->
							<li style="text-align: center;line-height: 48px;margin-bottom: 0;font-size: 12px;color: #999;">
								<span>如果您已拥有 无忧 账号，则可在此</span>
								<a href="javascript:;" style="margin: 0 5px" @click="toLogin">登陆</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script src="../../../static/geetest/gt.js"></script>
<script>
	import YFooter from '/common/footer'
	import YButton from '/components/YButton'
	import { register } from '/api/index.js'

	var captcha
	export default {
		data() {
			return {
				cart: [],
				loginPage: true,
				msgText: "",
				ruleForm: {
					phone: '',
					password: '',
					errMsg: ''
				},
				registered: {
					phone: '',
					password: '',
					confimpassword: '',
					errMsg: ''
				},
				registxt: '注册',
				statusKey: ''
			}
		},
		computed: {
			count() {
				return this.$store.state.login
			},
			password(){
				return this.registered.password;
			}
		},
		methods: {
			open(t, m) {
				this.$notify.info({
					title: t,
					message: m
				})
			},
			checkStrong(sValue) {
				var modes = 0;
				//正则表达式验证符合要求的
				if(sValue.length < 1) return modes;
				if(/\d/.test(sValue)) modes++; //数字
				if(/[a-z]/.test(sValue)) modes++; //小写
				if(/[A-Z]/.test(sValue)) modes++; //大写
				if(/\W/.test(sValue)) modes++; //特殊字符
				//逻辑处理
				switch(modes) {
					case 1:
						return 1;
						break;
					case 2:
						return 2;
						break;
					case 3:
					case 4:
						return sValue.length < 4 ? 3 : 4;
						break;
				}
				return modes;
			},
		   	// 注返回按钮
		    login_back () {
		      this.$router.go(-1)
		    },
			messageSuccess() {
				this.$message({
					message: '恭喜您，注册成功！赶紧登录体验吧',
					type: 'success'
				})
			},
			checkPwd(){
				var pwd = this.registered.password;
				if(pwd.length < 6){
					this.message('密码最小长度6位，您的密码太简单啦！')
				}
				if(pwd.length > 16){
					this.message('密码最大长度16位，您已超长哦！')
				}
			},
			//input事件处理
			inputPhone(e) {
				this.phoneerrmsg = ''; //验证输入的提示信息
				let filtered = e.target.value.replace(/^0|[^\d]/g, '');
				if(this.registered.phone != filtered) {
					this.registered.phone = filtered;
				}
				if(this.registered.phone.length > 11) {
					this.registered.phone = this.registered.phone.substr(0, 11);
					this.message('您的手机号码输入有误哦！');
				}
			},
			message(m) {
				this.$message.error({
					message: m
				})
			},
			toLogin() {
				this.$router.push({
					path: '/login'
				})
			},
			regist() {
				this.registxt = '注册中...'
				let phone = this.registered.phone
				let password = this.registered.password
				let confimpassword = this.registered.confimpassword
				if(!phone || !password || !confimpassword) {
					this.message('账号密码不能为空!');
					this.registxt = '注册'
					return false
				}
				if(!(/^1[3456789]\d{9}$/.test(phone))) {
					this.message('手机号码有误，请重填')
					this.registxt = '注册'
					return false;
				}
				if(confimpassword !== password) {
					this.message('两次输入的密码不相同!')
					this.registxt = '注册'
					return false
				}
				if(password.length < 6 || password.length > 16) {
					this.message('请控制密码长度为6位至16位长度字符!')
					this.registxt = '注册'
					return false
				}
				if(this.msgText < 2) {
						this.message('您的密码强度太低哦，为保障您的账号安全，请至少提升强度至中级!')
						this.registxt = '注册'
						return false
				}
				let params = {
					phone: this.registered.phone,
					password: this.registered.password,
					confimpassword: this.registered.confimpassword
				}
				register(params).then(res => {
					if(res.code === 200) {
						this.messageSuccess()
						this.toLogin()
					} else {
						this.message(res.msg);
						this.regist = '注册';
						return false
					}
				}).catch((e) => {
					this.message(e.data.data);
					this.registxt = '注册'
					return false
				});
			}

		},
		watch: {
				password: function(newname, oldname) {
					this.msgText = this.checkStrong(newname);
					if(this.msgText > 1 || this.msgText == 1) {
						document.getElementById("one").style.background = "red";
					} else {
						document.getElementById("one").style.background = "#eee";
					}
					if(this.msgText > 2 || this.msgText == 2) {
						document.getElementById("two").style.background = "orange";
					} else {
						document.getElementById("two").style.background = "#eee";
					}
					if(this.msgText == 4) {
						document.getElementById("three").style.background = "#0CDD82";
					} else {
						document.getElementById("three").style.background = "#eee";
					}
				}
		},
		mounted() {

		},
		components: {
			YFooter,
			YButton
		}
	}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
	* {
		box-sizing: content-box;
	}
	
	.login {
		overflow-x: hidden;
		overflow-y: hidden;
		.input {
			height: 50px;
			display: flex;
			align-items: center;
			input {
				font-size: 16px;
				width: 100%;
				height: 100%;
				padding: 10px 15px;
				box-sizing: border-box;
				border: 1px solid #ccc;
				border-radius: 6px;
			}
		}
		.wrapper {
			min-height: 800px;
			min-width: 630px;
			background: url(../../../static/images/bg/yxlm02.jpg) repeat;
		}
	}
	
	.v2 .dialog {
		width: 450px;
		border: 1px solid #dadada;
		border-radius: 10px;
		top: 50%;
		left: 50%;
		margin-left: -225px;
		position: absolute;
		.title {
			background: linear-gradient(#fff, #f5f5f5);
			height: auto;
			overflow: visible;
			box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
			position: relative;
			background-image: url(/static/images/smartisan_4ada7fecea.png);
			background-size: 140px;
			background-position: top center;
			background-repeat: no-repeat;
			height: 92px;
			margin: 23px 0 50px;
			padding: 75px 0 0;
			box-shadow: none;
			h4 {
				padding: 0;
				text-align: center;
				color: #666;
				border-bottom: 1px solid #dcdcdc;
				-webkit-box-shadow: none;
				-moz-box-shadow: none;
				box-shadow: none;
				font-weight: 700;
				position: absolute;
				bottom: 0;
				width: 100%;
				text-align: center;
				margin: 0;
				padding: 0;
				border-bottom: 0;
				-webkit-box-shadow: none;
				-moz-box-shadow: none;
				box-shadow: none;
				line-height: 1em;
				height: auto;
				color: #333;
				font-weight: 400;
			}
		}
		.content {
			padding: 0 40px 22px;
			height: auto;
			.common-form {
				li {
					clear: both;
					margin-bottom: 15px;
					position: relative;
				}
			}
		}
	}
	
	.dialog-shadow,
	.v2 .bbs .dialog-shadow,
	.v2 .dialog-shadow {
		-webkit-box-shadow: 0 9px 30px -6px rgba(0, 0, 0, 0.2), 0 18px 20px -10px rgba(0, 0, 0, 0.04), 0 18px 20px -10px rgba(0, 0, 0, 0.04), 0 10px 20px -10px rgba(0, 0, 0, 0.04);
		-moz-box-shadow: 0 9px 30px -6px rgba(0, 0, 0, 0.2), 0 18px 20px -10px rgba(0, 0, 0, 0.04), 0 18px 20px -10px rgba(0, 0, 0, 0.04), 0 10px 20px -10px rgba(0, 0, 0, 0.04);
		box-shadow: 0 9px 30px -6px rgba(0, 0, 0, 0.2), 0 18px 20px -10px rgba(0, 0, 0, 0.04), 0 18px 20px -10px rgba(0, 0, 0, 0.04), 0 10px 20px -10px rgba(0, 0, 0, 0.04);
	}
	
	@media screen and (min-width: 737px),
	screen and (-webkit-max-device-pixel-ratio: 1.9) and (max-width: 736px) and (min-device-width: 737px) {
		.wrapper {
			background: url(/static/images/con-bg_04f25dbf8e.jpg) repeat-x;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}
		.dialog {
			background: url(/static/images/dialog-gray-bg.png) #fff bottom repeat-x;
			border-radius: 12px;
			display: none;
			margin: -163px 0 0 -218px;
			width: 436px;
			position: fixed;
			left: 50%;
			top: 50%;
		}
		.dialog .title h4 {
			border-bottom: #d1d1d1 solid 1px;
			box-shadow: 0 2px 6px #d1d1d1;
			color: #666;
			font-size: 20px;
			height: 61px;
			line-height: 61px;
			padding: 0 0 0 35px;
		}
		.common-form li {
			clear: both;
			margin-bottom: 15px;
			position: relative;
		}
		.auto-login {
			position: absolute;
			top: 0px;
			left: 2px;
			color: #999;
		}
		.register {
			padding: 1px 10px 0;
			border-right: 1px solid #ccc;
		}
		.border {
			margin-top: 10px;
			border-bottom: 1px solid #ccc;
		}
		.other {
			margin: 20px 5px 0 0;
			width: auto;
			color: #bbb;
			font-size: 12px;
			cursor: default;
			color: #999;
		}
		.footer {
			display: flex;
			flex-direction: row;
		}
		.agree {
			margin-bottom: 30px;
			color: #999;
		}
	}
	
	.registered {
		h4 {
			padding: 0;
			text-align: center;
			color: #666;
			border-bottom: 1px solid #dcdcdc;
			-webkit-box-shadow: none;
			-moz-box-shadow: none;
			box-shadow: none;
			font-weight: 700;
			font-size: 20px;
			height: 60px;
			line-height: 60px;
		}
	}
	
	#wait {
		text-align: left;
		color: #999;
		margin: 0;
	}
	
	#inputValue {
		width: 240px;
		margin-left: 20px;
		padding-left: 10px;
		border-radius: 3px;
	}
	
	.input_span span {
		display: inline-block;
		width: 85px;
		height: 10px;
		background: #eee;
		line-height: 20px;
		cursor: pointer;
	}
	
	#one {
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
		border-right: 0px solid;
		margin-left: 20px;
		margin-right: 3px;
	}
	
	#two {
		border-left: 0px solid;
		border-right: 0px solid;
		margin-left: -5px;
		margin-right: 3px;
	}
	
	#three {
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
		border-left: 0px solid;
		margin-left: -5px;
	}
	#font{
		padding-left: 35px;
		margin-bottom: 20px;
	}
	#font span:nth-child(1) {
		color: red;
		margin-left: 80px;
	}
	
	#font span:nth-child(2) {
		color: orange;
		margin: 0 70px;
	}
	
	#font span:nth-child(3) {
		color: #0CDD82;
	}
</style>
